<script setup lang="ts">
  import { ref, watch } from 'vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HPlainBgButton from '@/components/common/button/HPlainBgButton.vue'
  import { useGetWaitCheckCancelOrderService, useCheckCancelOrderService } from './services'
  import { ElMessage } from 'element-plus'
  import HModal from '@/components/common/Modal/HModal.vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: () => false,
    },
    orderId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'updated'): void
  }>()

  // 弹窗的显示状态
  const visible = ref(props.modelValue)

  // 使用根据工单ID获取待审核取消工单信息服务
  const {
    loading: getWaitCheckCancelOrderLoading,
    info: waitCheckCancelOrderInfo,
    getInfo: getWaitCheckCancelOrderInfo,
  } = useGetWaitCheckCancelOrderService

  // 使用审核取消工单服务
  const { rejectLoading, reject, allowLoading, allow } = useCheckCancelOrderService

  // 审核备注
  const checkRemark = ref('')

  /**
   * 关闭事件
   */
  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  /**
   * 驳回按钮点击事件
   */
  const onRejectClick = async () => {
    if (waitCheckCancelOrderInfo.value) {
      const res = await reject(props.orderId, waitCheckCancelOrderInfo.value.id, checkRemark.value)
      ElMessage({
        type: res.success ? 'success' : 'error',
        message: res.message,
      })
      onClose()
      emits('updated')
    }
  }

  /**
   * 通过按钮点击事件
   */
  const onAllowClick = async () => {
    if (waitCheckCancelOrderInfo.value) {
      const res = await allow(props.orderId, waitCheckCancelOrderInfo.value.id, checkRemark.value)
      ElMessage({
        type: res.success ? 'success' : 'error',
        message: res.message,
      })
      onClose()
      emits('updated')
    }
  }

  /**
   * 取消按钮点击事件
   */
  const onCancelClick = () => {
    checkRemark.value = ''
    onClose()
  }

  watch(
    props,
    async (value) => {
      visible.value = value.modelValue
      if (visible.value) {
        await getWaitCheckCancelOrderInfo(value.orderId)
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <HModal title="审核取消" @close="onClose" v-model="visible" width="auto">
      <div
        class="info"
        v-if="waitCheckCancelOrderInfo"
        v-loading="getWaitCheckCancelOrderLoading || rejectLoading || allowLoading"
      >
        <div class="info_item">
          <div class="label">服务商名称：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.network }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请人员名称：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.applyEmp }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请时间：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.applyTime }}</div>
        </div>
        <div class="info_item" v-if="waitCheckCancelOrderInfo">
          <div class="label">申请备注：</div>
          <div class="value" style="max-width: 300px">{{
            waitCheckCancelOrderInfo.applyRemark
          }}</div>
        </div>
        <div class="info_item">
          <div class="label">审核备注：</div>
          <el-input
            type="textarea"
            maxlength="200"
            show-word-limit
            v-model="checkRemark"
            resize="both"
            class="textarea"
          />
        </div>
      </div>
      <template #footerLeft>
        <HPlainBgButton
          type="error"
          :loading="getWaitCheckCancelOrderLoading || rejectLoading || allowLoading"
          @click="onRejectClick"
          is-modal
          >驳回</HPlainBgButton
        >
      </template>
      <template #footerRight>
        <HButton
          is-modal
          type="primary"
          :loading="getWaitCheckCancelOrderLoading || rejectLoading || allowLoading"
          @click="onAllowClick"
          >通过</HButton
        >
        <HButton
          is-modal
          @click="onCancelClick"
          :loading="getWaitCheckCancelOrderLoading || rejectLoading || allowLoading"
          >取消</HButton
        >
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  @import './CheckCancelOrder.scss';
</style>
